<template>
  <div class="app">
    <h3>我是app组件,{{ name }}--{{ price }}</h3>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  readonly,
  isRef,
  isReactive,
  isReadonly,
  isProxy
} from 'vue'
export default {
  name: 'app',
  components: {
    Child
  },
  setup() {
    let car = reactive({
      name: 'bwm',
      price: '40k'
    })
    let sum = ref(0)
    let car2 = readonly(car)

    console.log(isRef(sum)) //true
    console.log(isReactive(car)) //true
    console.log(isReadonly(car2)) //true
    console.log(isProxy(car)) //true
    console.log(isProxy(car2)) // true
    console.log(isProxy(sum)) // false

    return {
      ...toRefs(car)
    }
  }
}
</script>

<style>
.app {
  background-color: pink;
  padding: 10px;
}
</style>
